<template>
  <div>
    <my-header></my-header>
    <div class="home">
      <div class="company-banner" style="">
        <div class="inner home-inner">
          <div>
            <div class="company-stat">
              <span
                ><router-link to="/cydetail"
                  ><b>10000</b>在招职位</router-link
                ></span
              ><em class="vline"></em><span><b>4776</b>位BOSS</span>
              <div class="op">
                <router-link to="/companyresume" class="fl icon-resume"
                  ><i class="icon icon-resume"></i>填写在线简历
                </router-link>
                <router-link to="/companyresume" class="fr icon-upload"
                  ><i class="icon"></i>上传附件简历</router-link
                >
              </div>
            </div>
            <div class="info-primary">
              <img :src="obj.src" />
              <div class="info">
                <h1 class="name">{{ obj.title }}</h1>
                <p>
                  {{ obj.stage }}<em class="dolt"></em>{{ obj.people
                  }}<em class="dolt"></em
                  ><router-link to="/position">{{ obj.kind }}</router-link>
                </p>
              </div>
            </div>
          </div>
          <div class="company-tab">
            <a @click="getcur1()" :class="flag1 ? 'cur' : ''">公司简介</a>
            <a @click="getcur2()" :class="flag2 ? 'cur' : ''"
              >招聘职位(10000+)</a
            >
            <a @click="getcur3()" :class="flag3 ? 'cur' : ''">工作感受</a>
          </div>
        </div>
      </div>

      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import myheader from "@/components/header.vue";
import { getCompanylist } from "@/api";
export default {
  name: "companydetail",
  data() {
    return {
      flag1: true,
      flag2: false,
      flag3: false,
      obj: {},
      list: [],
      title: "",
    };
  },
  components: {
    "my-header": myheader,
  },
  mounted() {
    // console.log(this.$route.params.title)
    this.title = this.$route.params.title;
    getCompanylist().then((res) => {
      this.list = res;
      this.list.forEach((val) => {
        if (val.id == this.$route.params.id) {
          this.obj = val;
        }
      });
      this.$router.push({
        name: "cyintro",
        params: {
          title: this.title,
        },
      });
    });
  },
  methods: {
    getcur1() {
      (this.flag2 = false),
        (this.flag3 = false),
        this.$router
          .push({
            name: "cyintro",
            params: {
              title: this.title,
            },
          })
          .catch((res) => {});
      this.flag1 = true;
    },
    getcur2() {
      (this.flag1 = false),
        (this.flag3 = false),
        this.$router.push("/cydetail").catch((res) => {});
      this.flag2 = true;
    },
    getcur3() {
      (this.flag1 = false),
        (this.flag2 = false),
        this.$router.push("/cyfeel").catch((res) => {});
      this.flag3 = true;
    },
  },
};
</script>
<style lang="less" scoped>
.home {
  // position: fixed;
  // top:50px;
}
.company-banner {
  padding-top: 20px;
  background-color: #444c5f;
  background-position: center 0;
  background-repeat: no-repeat;
  -webkit-background-size: auto 100%;
  background-size: auto 100%;
  color: #fff;
  padding: 29px 0;
  .company-tab {
    clear: both;
    margin-bottom: -29px;
    margin-top: 0;
    a {
      display: inline-block;
      vertical-align: top;
      font-size: 16px;
      color: #fff;
      margin-right: 45px;
      padding: 13px 0 10px;
    }
    .cur {
      color: #18c3b1;
      border-bottom: 3px #62d5c8 solid;
    }
  }
  a {
    color: #fff;
    text-decoration: none;
  }
  .inner {
    position: relative;
    width: 1184px;
    margin: 0 auto;
  }
  .home-inner {
    max-width: 1184px;
  }
  .company-stat {
    text-align: right;
    float: right;
    color: #fff;
    padding-top: 0;
    span {
      display: inline-block;
      vertical-align: middle;
      text-align: right;
      line-height: 1.3;
      b {
        line-height: 50px;
        color: #fff;
        padding: 0;
        display: block;
        font-size: 36px;
        text-align: right;
      }
    }
    .vline {
      height: 56px;
      background: #636b7c;
      margin: 11px 0 0;
      visibility: hidden;
      display: inline-block;
      width: 1px;
      height: 12px;
      vertical-align: middle;
      background: #e0e0e0;
      margin: 0 10px;
    }
    .vline + span {
      width: 176px;
    }
    .op {
      margin-top: 25px;
      font-size: 16px;
      a {
        color: #fa6a43;
        line-height: 20px;
      }
      .fl {
        float: left;
        i,
        .job-banner .icon-resume i {
          background: url(https://static.zhipin.com/zhipin-geek/v537/web/geek/images/job/icon-resume.png)
            center center no-repeat;
          background-size: contain;
        }
      }
      a + a {
        margin-left: 55px;
      }
      .fr {
        float: right;
        i {
          background: url(https://static.zhipin.com/zhipin-geek/v537/web/geek/images/job/icon-upload.png)
            center center no-repeat;
          background-size: contain;
        }
      }
    }
  }
  .info-primary {
    height: auto;
    font-size: 0;
    overflow: visible;
    img {
      width: 103px;
      height: 103px;
      border-radius: 13px;
      float: none;
      display: inline-block;
      vertical-align: middle;
      margin-top: -11px;
    }
    .info {
      margin-left: 25px;
      display: inline-block;
      vertical-align: middle;
      font-size: 14px;
      a {
        color: rgba(255, 255, 255, 0.7);
      }
      h1 {
        font-size: 32px;
        line-height: 48px;
        padding: 0 0 3px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .name {
        font-size: 24px;
        color: #fff;
        font-weight: 400;
        padding: 3px 0 15px;
      }
      p {
        line-height: 20px;
        padding: 0;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 13px;
        padding-bottom: 9px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .dolt {
        display: inline-block;
        vertical-align: middle;
        width: 2px;
        height: 2px;
        margin: 0 7px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.7);
      }
    }
  }
  .icon {
    display: inline-block;
    vertical-align: -2px;
    width: 18px;
    height: 15px;
    margin-right: 8px;
  }
}
</style>